<template>
  <div >
    <p class="xp" @click="triggerjump">跳过</p>
    <div class="imgbox">
      <img src="/guide1.png" alt="" ref="imageRef" />
    </div>
    <div class="text-box1" v-if="n == 0">
      <p>
        适合您的
        <br />
        时尚发型
      </p>
    </div>
    <div class="text-box1" v-if="n == 1">
      <p style="color: #ffb900">成为一名理发师</p>
    </div>
    <div class="text-box3" v-if="n == 2">
      <p>
        告别等待
        <br />
        最快的方法
        <br />
        预订美发服务
      </p>
    </div>
    <div class="swiper-circle">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
    <p class="btnbox">
      <button @click="right" v-if="n != 2">
        <el-icon :size="20"><Right /></el-icon>
      </button>
      <button
      v-if="n == 2"
        style="
          width: 85vw;
          height: 3rem;
          margin: 0 auto;
          margin-top: 1rem;
          border: none;
          border-radius: 0.5rem;
          background-color: #ffb900;
          color: white;
          font-size: 1.2rem;
        "
        @click="router.push('/login')"
      >
        开始使用
      </button>
    </p>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Right } from "@element-plus/icons-vue";

const router = useRouter();
const triggerjump = () => {
  router.push("/way");
};

let arr = ref(["/guide1.png", "/guide2.png", "/guide3.png"]);
let n = ref(0);
const imageRef = ref(null);

const right = () => {
  const spans = document.querySelectorAll("span");
  n.value++;
  if (n.value == arr.value.length) {
    n.value = 0;
  }
  imageRef.value.src = arr.value[n.value];
  for (let i = 0; i < arr.value.length; i++) {
    spans[i].classList.remove("active");
  }
  spans[n.value].classList.add("active");
};
</script>

<style lang="scss" scoped>
.swiper-circle {
  width: 100vw;
  height: auto;
  position: fixed;
  bottom: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: #dfe1e7;
    margin: 0 0.35rem;
  }
  .active {
    background-color: #ffb900;
  }
}
.xp {
  color: #ffb900;
  text-align: right;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
}
.imgbox {
  width: 100vw;
  height: auto;
  text-align: center;
  margin-top: 3rem;
  img {
    width: 100%;
    height: 22rem;
  }
}
.btnbox {
  width: 100vw;
  height: auto;
  position: fixed;
  bottom: 1rem;
  text-align: center;
  button {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50px;
    background-color: #ffb900;
    color: #fff;
    border: none;
    font-weight: bold;
  }
}
.text-box1 {
  width: 100vw;
  height: auto;
  text-align: center;
  margin-top: 4rem;
  p {
    font-size: 1.5rem;
  }
}
.text-box3 {
  width: 100vw;
  height: auto;
  text-align: center;
  margin-top: 2rem;
  p {
    font-size: 1.5rem;
  }
}
</style>